<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Learning Vue</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <a id="logo" href="https://gitee.com/wavef/learning-vue">
            <img src="https://cn.vuejs.org/images/logo.png">
            <span>Learning Vue</span>
        </a>
    </div>
    
    <div class="content">
        <div id="app" class="bloc">

            <div class="card">
                <p><a v-bind:href="link" target="_blank">{{message}}</a></p>
                <p>进度：<a :href="pLink" target="_blank">{{ pText }}</a></p>
            </div>
            
            <div class="card">
                <p v-bind:title="loadtime">鼠标悬停几秒钟<br>查看此处动态绑定的信息！</p>
            </div>

            <div class="card">
                <p v-if="seen">现在你看到我了</p>
                <button v-on:click="showHide">显示/隐藏</button>
            </div>
            
            <div class="card">
                <ul>
                    <li v-for="todo in todos">
                        {{ todo.text }}
                    </li>
                </ul>
            </div>
            
            <div class="card">
                <p>{{ userInput }}</p>
                <button v-on:click="reverseMsg">逆转消息</button>
            </div>
            
            <div class="card">
                <input type="text" v-model="yourEnter" placeholder="输入一点东西">
                <p>{{ yourEnter }}</p>
            </div>

            <div class="card">
                <ol>
                    <todo-item v-for="item in foodList"
                            v-bind:todo="item"
                            v-bind:key="item.id">
                    </todo-item>
                </ol>
            </div>

            <div class="card">
                <p>{{ obj.foo }}</p>
                <button @click=" obj.foo='baz' ">你改不了</button>
            </div>

            <div class="card">
                <p>Using mustaches: {{ rawHtml }}</p>
                <p>Using v-html directive: <span v-html="rawHtml"></span></p>
            </div>

            <div class="card">
                <button v-bind:disabled="isButtonDisabled" @click="alert('you click me')">Disabled</button>
            </div>

            <div class="card">
                <p>{{ num + 1 }}</p>
                <p>{{ ok?'YES':'NO' }}</p>
                <p>{{ msg.split('').reverse().join('←') }}</p>
                <div v-bind:id="'list-'+id">{{ 'list-'+id }}</div>
            </div>

            <div class="card">
                <p><a :href="link">{{ link }}</a></p>
                <button @click="alert('Hi Vue!')">Click Me</button>
            </div>

            <div class="card">
                <p>Orginal: "{{ msg }}"</p>
                <p>Computed Reverse: "{{ reverseMessage }}"</p>
            </div>

            <div class="card">
                <p>{{ fullName }}</p>
            </div>

            <div class="card">
                ???
                <p>Now: {{ now }}</p>
                <p>cNow: {{ cNow }}</p>
                <button @click="mNow">Get Now</button>
            </div>

        </div>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="index.js"></script>
</body>
</html>